<template>
  <div class="video-box">
    <!-- <van-popup v-model="videoShow" duration="0.15"> -->
    <el-dialog title="" :visible.sync="videoShow" @closed="closed">
      <div class="video-fixed" :style="isFull ? fullSize : {}">
        <div class="video-header">
          <div class="play-btn" @click="play">
            <img src="~img/video-play.png" alt="" />
          </div>
          <div class="name">{{ name }}</div>
          <div class="close-btn" @click="close">
            <img src="~img/video-close.png" alt="" />
          </div>
          <!-- <div class="full-btn" @click="toFull">
            <img src="~img/video-full.png" alt="" />
          </div> -->
        </div>
        <video :src="url" ref="videoDom" controls></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      url: '',
      videoShow: false,
      isFull: false,
      fullSize: {
        width: window.innerWidth + 'px',
        height: window.innerHeight + 'px'
      }
    }
  },
  methods: {
    openVideo(url, name) {
      this.url = url
      this.name = name
      this.videoShow = true
    },
    close() {
      this.$refs.videoDom.pause()
      this.url = ''
      this.name = ''
      this.videoShow = false
    },
    play() {
      if (this.$refs.videoDom.paused) {
        this.$refs.videoDom.play()
      } else {
        this.$refs.videoDom.pause()
      }
    },
    closed() {
      this.$refs.videoDom.pause()
      this.url = ''
      this.name = ''
    },
    toFull() {
      this.isFull = !this.isFull
    }
  }
}
</script>

<style lang="less" scoped>
.video-box {
  /deep/ .el-dialog {
    background-color: transparent;
    .w(954);
    .h(654);
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}

.video-fixed {
  .w(954);
  .h(654);
  background: #041a1e;
  border-radius: 10px;
  .padding(44, 10, 10, 10);
  position: relative;
  overflow: hidden;
  &.full {
    width: 100%;
    height: 100%;
  }
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
  // .padding(80, 0);
  // background: #000;
  .video-header {
    position: absolute;
    width: 100%;
    .h(44);
    .lh(44);
    .left(0);
    .top(0);
    .play-btn,
    .full-btn,
    .close-btn {
      .w(53);
      .h(44);
      .lh(44);
      text-align: center;
      float: left;
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
      img {
        .w(20);
        .h(20);
      }
    }
    .full-btn,
    .close-btn {
      float: right;
    }
    .name {
      float: left;
      .fs(18);
      color: #fff;
    }
  }
  video {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 10px;
  }
  // .close {
  //   position: absolute;
  //   .w(40);
  //   .h(40);
  //   .right(20);
  //   .top(20);
  //   img {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
}
</style>
